<template>
  <div class="ek-form">
    <el-form :model="form"  :disabled="disabled" label-width="160px" ref="forms">
      <div   v-show="columns.length">
        <template
          v-for="(item, index) in columns"
          :key="index"
        >
          <!-- 文本框 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-if="item.type == 'Input'"
          >
            <ekInput
              v-model="form[item.column]"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
              @input="input"
            />
           
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Select'"
          >
            <ekSelect
              v-model="form[item.column]"
              :name="form[item.column+'_dim_text'] || ''"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :autoInit="item.autoInit"
              :options="item.options"
              :url="item.url"
              :dimCode="item.dimCode"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :collapseTagsTooltip="item.collapseTagsTooltip"
              :mapping="item.mapping"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
            />
          </el-form-item>
          <!-- 模型下拉框 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'SelectModel'"
          >
            <ekSelectModel
              v-model="form[item.column]"
              :name="form[item.column+'_model_text'] || ''"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :options="item.options"
              :url="item.url"
              :modelCode="item.modelCode"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :collapseTagsTooltip="item.collapseTagsTooltip"
              :mapping="item.mapping"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
            />
          </el-form-item>
          <!-- 树选择器 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'TreeSelect'"
          >
            <ekTreeSelect 
              v-model="form[item.column]"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :autoInit="item.autoInit"
              :options="item.options"
              :remote="item.remote"
              :url="item.url"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :collapseTagsTooltip="item.collapseTagsTooltip"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
              :treeConfig="item.treeConfig"
            
            />
          </el-form-item>
           <!-- 表格选择器 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'TableSelect'"
          >
            <ekTableSelect 
              v-model="form[item.column]"
               :name="form[item.column+'_model_text'] || ''"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :url="item.url"
              :multiple="item.multiple"
              :collapseTags="item.collapseTags"
              :collapseTagsTooltip="item.collapseTagsTooltip"
              :mapping="item.mapping"
              @change="change"
              @clear="clear"
              :layoutData="item.layoutData"
            />
          </el-form-item>
          <!-- 开关 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Switch'"
          >
            <ekSwitch
              :activeText="item.activeText"
              :activeValue="item.activeValue"
              :inactiveText="item.inactiveText"
              :inactiveValue="item.inactiveValue"
              v-model="form[item.column]" 
              :disabled="item.disabled"
              @change="change"
            />
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Radio'"
          >
            <ekRadio
              v-model="form[item.column]"
              :disabled="item.disabled"
              :options="item.options"
              :url="item.url"
              @change="change"
            
            />
          </el-form-item>
          <!-- 复选框 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Checkbox'"
          >
            <ekCheckbox
              v-model="form[item.column]"
              :disabled="item.disabled"
              :options="item.options"
              :url="item.url"
              @change="change"
            />
          </el-form-item>
          <!-- 日期 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'DatePicker'"
          >
            <ekDatePicker 
              v-model="form[item.column]"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :format="item.format"
              :type="item.type"
              :valueFormat="item.valueFormat"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
            />
          </el-form-item>
          <!-- 时间 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'DateTimePicker'"
          >
            <ekDateTimePicker 
              v-model="form[item.column]"
              :placeholder="item.placeholder"
              :clearable="item.clearable"
              :disabled="item.disabled"
              :format="item.format"
              :type="item.type"
              :valueFormat="item.valueFormat"
              @blur="blur"
              @focus="focus"
              @change="change"
              @clear="clear"
            />
          </el-form-item>
          <!-- 长文本 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Textarea'"
          >
            <ekTextarea 
              v-model="form[item.column]"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
              :maxlength="item.maxlength"
              @blur="blur"
              @focus="focus"
              @change="change"
              @input="input"

            />
          </el-form-item>
          <!-- 文件上传 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'UploadFile'"
          >
            <ekUploadFile 
              v-model="form[item.column]"
              :disabled="item.disabled"
              :action="item.action"
              :multiple="item.multiple"
              :limit="item.limit"
              :size="item.size"
              :autoUpload="item.autoUpload"
              :headers="item.headers"
            />
          </el-form-item>
          <!-- 图片上传 -->
          <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'UploadImage'"
          >
            <ekUploadImage 
              v-model="form[item.column]"
              :disabled="item.disabled"
              :action="item.action"
              :multiple="item.multiple"
              :limit="item.limit"
              :size="item.size"
              :autoUpload="item.autoUpload"
              :headers="item.headers"
            
            />
          </el-form-item>
          <!-- 富文本 -->
          <!-- <el-form-item
            :label="item.label"
            :prop="item.column"
            :rules="item.rules"
            v-else-if="item.type == 'Editor'"
          >
            <ekEditor 
              v-model="form[item.column]"
              @change="change"
              @blur="blur"
              @focus="focus"
              
            />
          </el-form-item>     -->
        </template>
      </div>
    </el-form>

  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref,
  computed,
  defineExpose
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import ekInput from "./ekInput/index.vue";
import ekSelect from "./ekSelect/index.vue";
import ekSwitch from "./ekSwitch/index.vue";
import ekRadio from "./ekRadio/index.vue";
import ekCheckbox from "./ekCheckbox/index.vue";
import ekDatePicker from "./ekDatePicker/index.vue";
import ekDateTimePicker from "./ekDateTimePicker/index.vue";
import ekTextarea from "./ekTextarea/index.vue";
import ekUploadFile from "./ekUploadFile/index.vue";
import ekUploadImage from "./ekUploadImage/index.vue";
import ekEditor from "./ekEditor/index.vue";
import ekTreeSelect from "./ekTreeSelect/index.vue";
import ekTableSelect from "./ekTableSelect/index.vue";
import ekSelectModel from "./ekSelectModel/index.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();
const props = defineProps({
  // 表单数据
  form: {
    type: Object,
    default: {},
  },
  // 字段
  columns: {
    type: Array,
    default: [],
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
});
const form = computed({
  get() {
    return props.form;
  },
});
const columns = computed({
  get() {
    return props.columns;
  },
});
const emit = defineEmits([
  "update:modelValue",
  "blur",
  "focus",
  "change",
  "input",
  "clear",
  "submit",
]);

let forms = ref(null);

function validate(done) {
  forms.value.validate((valid) => {
    if (valid) {
      done && done(form.value);
    }
  });
};

defineExpose({
  validate
});

// 失去焦点
function blur(event) {
  emit("blur", event);
};
// 聚焦
function focus(event) {
  emit("focus", event);
};
// 改变事件
function change(event) {
  emit("change", event);
};
// 实时改变事件
function input(event) {
  emit("input", event);
};
// 清除事件
function clear() {
  emit("clear");
};

// 懒加载存在数据显示问题要如何处理

// todo 
// （1）后端已经设置好了映射，和前端配置映射字段冲突
// （2）多选自动填充如何处理
// （3）自定地址的维度组件接口，如何在详情如何显示对应文本
// （4）通过后端获取数据的组件，尽量不要初始化获取数据，尽量使用懒加载，详情通过后端返回即可
// （5）模型，维度多选方案后端如何存储问题，数据如何返回问题

</script>

<style  lang="scss">
.ek-form {
  height: 100%;
  overflow: auto;
  padding-right: 80px;
  .ek-input,
  .ek-select,
  .ek-date-picker,
  .ek-select-tree,
  .ek-select-table,
  .ek-textarea {
    // width: 220px;
    width: 100%;
  }
  .ek-editor{
    width: 100%;
  }
  .ek-select {
    :deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
